/**
 * 图像分割
 * @param { String } url1 源图地址
 * @param { String } url2 mask图地址
 * @param { Object | Array } data { bboxColor: '255,0,0' }
 * @returns base64 地址
 */

export function unpick(url1, url2, data) {
  return new Promise((resolve, reject) => {
    const loadImage = (url) => {
      return new Promise((_resolve, _reject) => {
        const image = new Image()
        image.crossOrigin = 'anonymous'
        image.src = url
        image.onload = () => _resolve(image)
        image.onerror = _reject
      })
    }

    const colors = {
      // 1: { r: 255, g: 255, b: 255 },
      // 添加更多标签颜色
    }

    if (data.constructor === Object) {
      const color = data.bboxColor.split(',')
      colors[1] = { r: color[0], g: color[1], b: color[2] }
    } else {
      data.forEach((b, i) => {
        const color = b.bboxColor.split(',')
        colors[i + 1] = { r: color[0], g: color[1], b: color[2] }
      })
    }

    Promise.all([loadImage(url1), loadImage(url2)])
      .then(([imgA, imgB]) => {
        const canvasA = document.createElement('canvas')
        const ctxA = canvasA.getContext('2d')
        canvasA.width = imgA.width
        canvasA.height = imgA.height
        ctxA.drawImage(imgA, 0, 0)

        // 获取图像 a 的图像数据
        const imageDataA = ctxA.getImageData(
          0,
          0,
          canvasA.width,
          canvasA.height
        )
        const pixelDataA = imageDataA.data

        const canvasB = document.createElement('canvas')
        const ctxB = canvasB.getContext('2d')
        canvasB.width = imgB.width
        canvasB.height = imgB.height
        ctxB.drawImage(imgB, 0, 0)

        // 获取图像 b 的图像数据
        const imageDataB = ctxB.getImageData(
          0,
          0,
          canvasB.width,
          canvasB.height
        )
        const pixelDataB = imageDataB.data

        // 透明度因子（0 - 1之间，这里设为0.5表示半透明）
        const alpha = 0.5

        // 遍历像素并处理
        for (let i = 0; i < pixelDataB.length; i += 4) {
          // 检查b图像的红色通道中的值，假设它是一个灰度图像
          const labelValue = pixelDataB[i] // 读取单通道的值

          // 如果类别为water（你可以根据需要调整类别值）
          if (colors[labelValue]) {
            const { r, g, b } = colors[labelValue]

            // 将 A 对应像素设为红色 修改RGB
            pixelDataA[i + 0] = r * alpha + pixelDataA[i + 0] * (1 - alpha) // R
            pixelDataA[i + 1] = g * alpha + pixelDataA[i + 1] * (1 - alpha) // G
            pixelDataA[i + 2] = b * alpha + pixelDataA[i + 2] * (1 - alpha) // B
            pixelDataA[i + 3] = 255 * alpha + pixelDataA[i + 3] * (1 - alpha) // A
          }
        }

        // 将处理后的图像数据绘制回 canvas
        ctxA.putImageData(imageDataA, 0, 0)

        // 将处理后的图像数据转换为 base64 格式
        const base64 = canvasA.toDataURL('image/jpeg', 1)
        resolve(base64)
      })
      .catch(reject)
  })
}

/**
 * 图像画框
 * @param { String } url 图像地址
 * @param { String | Array } data
 * @returns base64 地址 bbox : [左下角(x0,y0)，右上角(x1,y1)]
 */
// frame(url, '990,530,1130,440').then(res => {
// imageUrl.value = res;
// });
export function frame(url, data) {
  return new Promise((resolve, reject) => {
    const image = new Image();
    image.src = url;
    image.setAttribute('crossOrigin', 'Anonymous');

    image.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      canvas.width = image.width;
      canvas.height = image.height;

      ctx.drawImage(image, 0, 0, image.width, image.height);

      // 添加文字
      function fillText(text, width, height, x0, y0, x1, y1) {
        console.log(text, width, height, x0, y0, x1, y1);

        ctx.font = `${1.25 * devicePixelRatio}rem Microsoft YaHei`; // 字体
        ctx.fillStyle = '#ff0000'; // 字色

        // 文字位置
        // y0 < 100
        //   ? ctx.fillText(
        //     text,
        //     x0 - width + width + 15,
        //     y1 - height + 55
        //   )
        //   : ctx.fillText(text, x0, y0 - 30);

        // 框内(左上角)
        ctx.fillText(text, x1 - width + width + 10, y1 - height + height + 30);

        // 框外(左上角)
        ctx.fillText(text, x1 - width + width + 10, y1 - height + height - 13);
      }

      // TODO 判断 是否直接是坐标(单框)还是对象(多框)
      if (data.constructor === String) {
        // // [左下角(x0,y0)，右上角(x1,y1)]
        const xy = data.split(','); // ['355', '2282', '851', '2998']

        const width = xy[2] - xy[0];
        const height = xy[3] - xy[1];

        // // 添加文字
        // fillText('哈哈哈哈哈', width, height, xy[0], xy[1], xy[2], xy[3]);
        ctx.strokeStyle = '#f00'; // 框色


        // // 添加矩形框
        ctx.lineWidth = image.width / 400; // 框宽
        ctx.strokeRect(xy[0], xy[1], width, height);
      } else {
        data.forEach((i) => {
          const xy = i.bbox.split(','); // ['355', '2282', '851', '2998']

          const width = xy[2] - xy[0];
          const height = xy[3] - xy[1];

          // 添加文字
          ctx.font = '3rem Microsoft YaHei'
          ctx.fillStyle = `rgb(${i.bboxColor})`
          ctx.strokeStyle = `rgb(${i.bboxColor})`

          // 文字位置
          xy[1] < 100
            ? ctx.fillText(
              i.deviceName,
              xy[0] - width + width + 15,
              xy[3] - height + 55
            )
            : ctx.fillText(i.deviceName, xy[0], xy[1] - 30)

          // 添加矩形框
          // ctx.lineWidth = image.width / 400
          // ctx.strokeRect(xy[0], xy[1], width, height)
        });
      }


      const base64 = canvas.toDataURL('image/jpeg', 1);
      resolve(base64);
    };

    image.onerror = () => reject;
  });
}
